extends layout-customer

block head

block content
	h1.page-header= title
	
	if householdRole === 'founder'
		form(method='post', action='/household/update')
			input(type='hidden', name='_csrf', value=_csrf)
			input(type='hidden', name='id', value=household)
			div.input-group
				span.input-group-addon Name
				input.form-control(type='text', name='name', value=householdName)
				span.input-group-btn
					input.btn.btn-primary(type='submit', value='Ändern')
		hr
	div.container-fluid
		div.row
			each row in mySummary
				div.col-xs-12.col-sm-6.col-md-4
					div.smalltile.box
						if row.diff < 0
							i.glyphicon.glyphicon-open.red
						else 
							i.glyphicon.glyphicon-save.green
						div
							span.glyphicon.glyphicon-user
							span &nbsp;
							span.title
								= row.name
						div
							span.value
								span(class=row.diff < 0 ? 'money-neg' : (row.diff > 0 ? 'money-pos' : 'money-zero'))= formatCurrency(row.diff)
			div.col-xs-12.col-sm-6.col-md-4
				div.smalltile.box
					if myTotal < 0
						i.glyphicon.glyphicon-credit-card.red
					else 
						if myTotal > 0
							i.glyphicon.glyphicon-credit-card.green
						else
							i.glyphicon.glyphicon-credit-card.blue
					div
						span.title Total
					div
						span.value
							span(class=myTotal < 0 ? 'money-neg' : (myTotal > 0 ? 'money-pos' : 'money-zero'))= formatCurrency(myTotal)
			div.col-xs-12.col-sm-6.col-md-4
				div.smalltile.box
					i.glyphicon.glyphicon-list-alt.blue
					div
						span.title Einkaufslisten
					div
						span.value
							= shoppingLists.length
	hr
	h2.sub-header Mitglieder
	
	div.container-fluid
		div.row
			each member in members
				div.col-xs-12.col-sm-6.col-md-4
					div.tile
						div.row.tile-fill
							h4
								span.glyphicon.glyphicon-user
									| &nbsp;
								= member.name
								span.pull-right
									if member.role === 'founder'
										span &#9733;
						div.row.tile-fill
							span.glyphicon.glyphicon-envelope
								| &nbsp;
							= member.email
	p &#9733; = Gründer
	table.table.table-striped
		each invitation in invitations
			tr
				td= invitation.to_person_name
				if householdRole === 'founder'
					td
						form(method='post', action='/household/invitation/cancel2')
							input(type='hidden', name='_csrf', value=_csrf)
							input(type='hidden', name='household', value=household)
							input(type='hidden', name='to_person', value=invitation.to_person_id)
							input.btn.btn-warning.pull-right(type='submit', value='Zurückziehen')
	div.alert.alert-info(role='alert')
		p Du musst Gründer sein, um Einladen zu können.	
	if householdRole === 'founder'
		form(method='POST', action='/household/invitation/create')
			input(type='hidden', name='_csrf', value=_csrf)
			input(type='hidden', name='household', value=household)
			div.input-group
				input.form-control(type='email', name='email', placeholder='freund@example.de', required='required')
				span.input-group-btn
					input.btn.btn-primary(type='submit', value='Einladen')
		
	h2.sub-header.hidden Schuldenmatrix
	
	table.table.table-striped.hidden
		tr
			td
			th(colspan=members.length) ... hat Schulden bei ...
			td
			td
		tr
			td
			each buyer in members
				th= buyer.name
			th Schulden-Summe
			th Differenz
		each owner, ownerIndex in members
			tr
				th= owner.name
				each buyer, buyerIndex in members
					if ownerIndex == buyerIndex
						td -
					else
						td= formatCurrency2(debtsMatrix[ownerIndex * members.length + buyerIndex].total)
				th= formatCurrency2(debtsSummary[ownerIndex].incoming)
				th= formatCurrency2(debtsSummary[ownerIndex].diff)
		tr
			th Bezahlt-Summe
			each sum in debtsSummary
				th= formatCurrency2(sum.outgoing)
			th
			th
					
	div.alert.alert-info.hidden(role='alert')
		p Von links nach rechts lesen!
					
	h2.sub-header Einkaufslisten
	
	div.container-fluid
		div.row
			each shoppingList in shoppingLists
				div.col-xs-12.col-sm-6.col-md-4
					div.tile
						div.row.tile-fill
							h4
								span.glyphicon.glyphicon-user
								| &nbsp;
								= shoppingList.person_name
								a.pull-right(href='/shopping_list/' + shoppingList.id) 
									i.glyphicon.glyphicon-pencil
						div.row.tile-fill
							span.glyphicon.glyphicon-shopping-cart
							| &nbsp;
							= shoppingList.shop_name
						div.row.tile-fill
							span.glyphicon.glyphicon-calendar
							| &nbsp;
							= formatDate(shoppingList.shopped)
						div.row.tile-fill
							span.glyphicon.glyphicon-briefcase
							| &nbsp;
							= formatCurrency(shoppingList.total)
						div.row.tile-fill
							form(method='post', action='/shopping_list/delete')
								input(type='hidden', name='_csrf', value=_csrf)
								input(type='hidden', name='id', value=shoppingList.id)
								button.btn.btn-danger.pull-right(type='submit', value='Löschen')
									span.glyphicon.glyphicon-trash
			div.col-xs-12.col-sm-12.col-md-8
				div.tile(ng-app='datepicker', ng-controller='DatepickerCtrl as datepicker')
					h4 Erstellen 
					form(method='POST', action='/shopping_list/create')
						input(type='hidden', name='_csrf', value=_csrf)
						input(type='hidden', name='household', value=household)
						input#shopping-list-create-buyer(type='hidden', name='buyer')
						div.row.tile-fill
							button.btn.btn-default.dropdown-toggle#shopping-list-add-button(style='', type='button', data-toggle='dropdown', size='1', name='buyer', value='')
								span#shopping-add-button-text -- Wähle Einkäufer --
								span.caret
							ul.dropdown-menu(role='menu', style='position: relative;')
								each member in members
									li
										a(onclick='changeShoppingAddButton('+member.id+',"'+member.name+'")')= member.name
									//option(value=member.id)= member.name
							
							script(type="application/javascript")
								|function changeShoppingAddButton(value,name){
								|	console.log("v:"+value+" n:"+name);
								|	document.getElementById('shopping-list-create-buyer').value = value;
								|	document.getElementById('shopping-add-button-text').textContent = name+" ";
								|};
						div.row.tile-fill
							input.form-control(type='text', ng-model='selected', typeahead='market for market in getShops($viewValue) | limitTo:8', name='shop', value='', placeholder='Laden, z.B. Supermarkt an der Ecke', ng-model-options='{debounce: 1000}')
						div.row.tile-fill
									div.input-group
										input.form-control(name='shopped_date', type='text', datepicker-popup='{{format}}', ng-model='dt', is-open='opened', min-date='"2000-01-01"', max-date='maxDate',  datepicker-options='dateOptions', date-disabled='disabled(date, mode)', ng-required='true', close-text='Schließen')
										span.input-group-btn
											button.btn.btn-default(type='button', ng-click='open($event)')
												i.glyphicon.glyphicon-calendar
						div.row.tile-fill
								input.form-control(type='text', name='shopped_time', placeholder='HH:MM', value="{{dt | date : 'HH:mm'}}")
						div.row.tile-fill
							button.btn.btn-success.pull-right(type='submit', value='Erstellen')
								span.glyphicon.glyphicon-plus-sign
			div.col-xs-12.col-sm-6.col-md-4.hidden
				div.tile(style='text-align:center;')
					a.btn
						h1.glyphicon.glyphicon-open
						br
						span Einkaufszettel Upload
	script(type="application/javascript")
		| changeShoppingAddButton(
		=person.id
		| ,"
		=person.name
		| ");